<template>
  <div class="modelBusinessList-container">
    <BimModel :modelId="childInitData.modelId" :pushpinList="pushpinList" :showPushPin="true" @clickPushpin="handleClickPushpin"/>
    <transition-group name="fade-transform">
      <ListTemplate
        ref="listTemplate"
        key="template"
        class="side-right"
        v-show="visible.listPanel"
        @cancel="visible.listPanel = false"
        :listType="listType"
        :modelId="childInitData.modelId"
        :projectId="projectId"
        @pushpinChanged="handlePushpinChanged"
      />
      <div key="icon" class="icon-wrapper side-right" v-show="!visible.listPanel">
        <a-icon type="menu-fold" class="base-btn" @click="visible.listPanel = true" />
      </div>
    </transition-group>
    <SelectProjectInBim
      :visible="visible.selectProject"
      @confirm="confirmSelectProject"
      @cancel="visible.selectProject = false"
      @empty="visible.selectProject = true"
    />
  </div>
</template>

<script>
import BimModel from '@/components/BimIntegrate'
import SelectProjectInBim from '@/components/BimIntegrate/SelectProjectInBim'
import ListTemplate from '@/components/BimIntegrate/components/ListTemplate'
export default {
  components: {
    BimModel,
    SelectProjectInBim,
    ListTemplate,
  },
  data() {
    return {
      pushpinList: [],
      visible: {
        listPanel: true,
        selectProject: false,
      },
      childInitData: {},
    }
  },
  computed: {
    listType() {
      return this.$route.meta.listType || 'wbs'
    },
    projectId() {
      return this.$store.getters['bimInfo/GET_PROJECTID']
    },
  },
  created() {
    this.initPage()
  },
  methods: {
    handleClickPushpin(data) {
      const ref = this.$refs.listTemplate
      ref && ref.openDetailModal({
        ...data,
        id: data.problemId
      })
    },
    handlePushpinChanged(list) {
      this.pushpinList = list
    },
    confirmSelectProject() {
      this.visible.selectProject = false
      this.initPage()
    },
    initPage() {
      const mainModelId = sessionStorage.getItem('mainModel')
      if (mainModelId) {
        this.childInitData = {
          ...this.childInitData,
          modelId: mainModelId,
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.modelBusinessList-container {
  position: relative;
  overflow: hidden;
  .side-right {
    position: absolute;
    top: 0;
    right: 0;
  }
  .icon-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 2px;
    font-size: 24px;
  }
}
</style>